﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Grids - Columns with Fixed Width</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
    <link rel="stylesheet" href="../../../css/samples.css" />
    <link rel="stylesheet" href="../../../css/integralui.css" />
    <link rel="stylesheet" href="../../../css/integralui.treegrid.css" />
    <link rel="stylesheet" href="../../../css/themes/theme-flat-blue.css" />
    <script type="text/javascript" src="../../../external/angular.min.js"></script>
    <script type="text/javascript" src="../../../js/angular.integralui.min.js"></script>
    <script type="text/javascript" src="../../../js/angular.integralui.lists.min.js"></script>
    <script type="text/javascript" src="../../../js/angular.integralui.treegrid.min.js"></script>
    <script type="text/javascript">
 		angular
			.module("appModule", ["integralui"])
			.controller("appCtrl", ["$scope", "IntegralUITreeGridService", "$timeout", function($scope, $gridService, $timeout){
				$scope.gridName = "gridSample";
				$scope.btnText = "Lock All Columns";
				$scope.columnFixed = false;

				var supressCallback = false;

				$scope.columns = [
					{ name: 'Column1', headerText: 'Header1', footerText: 'Footer1', width: 200 },
					{ name: 'Column2', headerText: 'Header2', footerText: 'Footer2', width: 250 },
					{ name: 'Column3', headerText: 'Header3', footerText: 'Footer3', width: 120 }
				];

				$scope.rows = [
					{ 
						id: 1,
						text: "Item1",
						cells: [{ text: "Item11" }, { text: "Item12" }, { text: "Item13" }],
						rows: [
							{ id: 11, pid: 1, text: "Item11", cells: [{ text: "Item111" }, { text: "Item112" }, { text: "Item113" }] },
							{ 
								id: 12,
								pid: 1,
								text: "Item12",
								cells: [{ text: "Item121" }, { text: "Item122" }, { text: "Item123" }],
								rows: [
									{ id: 121, pid: 12, text: "Item121", cells: [{ text: "Item1211" }, { text: "Item1212" }, { text: "Item1213" }] },
									{ 
										id: 122,
										pid: 12,
										text: "Item122", 
										cells: [{ text: "Item1221" }, { text: "Item1222" }, { text: "Item1223" }],
										expanded: false,
										rows: [
											{ id: 1221, pid: 122, text: "Item1221", cells: [{ text: "Item12211" }, { text: "Item12212" }, { text: "Item12213" }] },
											{ id: 1222, pid: 122, text: "Item1222", cells: [{ text: "Item12221" }, { text: "Item12222" }, { text: "Item12223" }] }
										]
									},
									{ id: 123, pid: 12, text: "Item123", cells: [{ text: "Item1231" }, { text: "Item1232" }, { text: "Item1233" }] }
								]
							},
							{ id: 13, pid: 1, text: "Item13", cells: [{ text: "Item131" }, { text: "Item132" }, { text: "Item133" }] },
							{
								id: 14,
								pid: 1,
								text: "Item14",
								cells: [{ text: "Item141" }, { text: "Item142" }, { text: "Item143" }],
								rows: [
									{ id: 141, pid: 14, text: "Item141", cells: [{ text: "Item1411" }, { text: "Item1412" }, { text: "Item1413" }] },
									{ id: 142, pid: 14, text: "Item142", cells: [{ text: "Item1421" }, { text: "Item1422" }, { text: "Item1423" }] }
								]
							}
						]
					},
					{
						id: 2,
						text: "Item2",
						cells: [{ text: "Item21" }, { text: "Item22" }, { text: "Item23" }],
						expanded: false,
						rows: [
							{ id: 21, pid: 2, text: "Item21", cells: [{ text: "Item211" }, { text: "Item212" }, { text: "Item213" }] },
							{ id: 22, pid: 2, text: "Item22", cells: [{ text: "Item221" }, { text: "Item222" }, { text: "Item223" }] },
							{
								id: 23,
								pid: 2,
								text: "Item23", 
								cells: [{ text: "Item231" }, { text: "Item232" }, { text: "Item233" }],
								expanded: false,
								rows: [
									{ id: 231, pid: 23, text: "Item231", cells: [{ text: "Item2311" }, { text: "Item2312" }, { text: "Item2313" }] },
									{ id: 232, pid: 23, text: "Item232", cells: [{ text: "Item2321" }, { text: "Item2322" }, { text: "Item2323" }] }
								]
							}
						]
					},
					{ id: 3, text: "Item3", cells: [{ text: "Item31" }, { text: "Item32" }, { text: "Item33" }] }
				];

				var initTimer = $timeout(function(){
					$scope.selColumn = $scope.columns[0];

					$timeout.cancel(initTimer);
				}, 1);

				$scope.onAfterSelect = function(e){
					if (supressCallback)
						return;

					if (e.object && e.object.type == 'column'){
						$scope.selColumn = $gridService.selectedColumn($scope.gridName);
						$scope.$apply();
					}
				}

				$scope.$watch("selColumn", function(newValue, oldValue){
					if (newValue != oldValue){
						supressCallback = true;
						$gridService.selectedColumn($scope.gridName, newValue);
						supressCallback = false;

						$gridService.updateView($scope.gridName);
					}
				});

				$scope.lockAllColumns = function(){
					$scope.columnFixed = !$scope.columnFixed;
					$scope.btnText = $scope.columnFixed ? "Unlock All Columns" : "Lock All Columns";

					for (var j = 0; j < $scope.columns.length; j++)
						$scope.columns[j].fixedWidth = $scope.columnFixed;
				}
			}]);
    </script>
    <style type="text/css">
		.control-panel
		{
			margin-left: 35px;
			width: 250px;
		}
		.feature-content
		{
			width: 900px;
		}
        .directive
        {
        	border: thin solid #dadada;
        	width: 600px;
        	height: 350px;
        }
        select
        {
        	margin: 5px 0 15px 0;
        	width: 100px;
        }
        button
        {
        	width: 100%;
        	padding: 5px;
        }
    </style>
</head>
<body>
	<div class="header">
        <div class="header-content">
		    <h1><span style="color:#c60d0d">IntegralUI</span> Studio <span style="font-size:0.75em; font-style:italic">for Web</span></h1>
        </div>
        <hr class="head-separator" />
    </div>
    <div class="content" ng-app="appModule">
        <div class="feature" ng-controller="appCtrl">
	        <h2 class="feature-title">Grids / Columns with Fixed Width</h2>
	        <div class="feature-content">
                <iui-treegrid name="{{gridName}}" class="directive" columns="columns" rows="rows" after-select="onAfterSelect(e)" grid-lines="gridLines" ></iui-treegrid>
                <div class="control-panel">
                	<label>Selected Column: </label>
                	<select ng-model="selColumn" ng-options="column.name for column in columns"></select>
                    <label><input type="checkbox" ng-click="toggleFixed()" ng-model="selColumn.fixedWidth" value="false"/> Is Width Fixed</label><br /><br /><br />
					<button ng-click="lockAllColumns()" ng-model="btnText">{{btnText}}</button>
                </div>
                <br style="clear:both;"/>
                <div class="feature-help">
                    <p><span class="initial-space"></span>This example shows how to lock the width of specified column in TreeGrid directive. On right panel you can find controls with which you can determine whether the width of specific column is fixed or not. By default column width is not fixed.</p>
                    <p><span class="initial-space"></span>Each column object has a field which allows you to prevent column from resizing.</p>
                        <ul class="feature-points">
                            <li><span style="color:#c60d0d">'fixedWidth'</span> - when true, locks the column width and prevents it from resizing</li>
                        </ul>
                    </p>
                    <p><span class="initial-space"></span>When column is fixed, when mouse cursor hovers over right side of its header, the resizing cursor will not appear. This prevents column from resizing, by the end user.</p>
               </div>
            </div>
        </div>
    </div>
</body>
</html>
